<template>
  <div class="fathercom">
    <h2>我是父组件</h2>
    <!-- 使用子组件  -->
    <SonComponent
      v-for="item in message"
      :key="item.id"
      :msg="item"
      @year="year"
    ></SonComponent>
  </div>
</template>

<script>
// 局部注册组件 引入子组件
import SonComponent from './Son.vue'
export default {
  name: 'FatherComponent',
  // 局部注册
  components: { SonComponent },
  data() {
    return {
      message: [
        {
          id: '1',
          uname: 'harry',
          famliyName: 'despot',
          age: 28,
          profess: '前端',
        },
        {
          id: '2',
          uname: '志豪',
          famliyName: '陈',
          age: 17,
          profess: '测试',
        },
        {
          id: '3',
          uname: '嘉',
          famliyName: '高',
          age: 21,
          profess: '全栈',
        },
        {
          id: '4',
          uname: '涵翔',
          famliyName: '侯',
          age: 18,
          profess: '帕勒马斯',
        },
      ],
    }
  },

  methods: {
    year(e) {
      this.message.forEach((item) => {
        item.age === 50
          ? alert('该退休了')
          : item.id === e.id
          ? (item.age += e.num)
          : ''
      })
    },
  },
}
</script>

<style scoped>
.fathercom {
  background-color: lavender;
  padding: 70px;
}
</style>
